<!DOCTYPE html>
<html>
<head>
    <title>Hall Effect Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
<canvas id="physics-diagram" width="700" height="480"></canvas>
<script>
    const canvas = document.getElementById('physics-diagram');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow
    function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 10) {
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // Helper function to draw a double-headed arrow
    function drawDoubleArrow(ctx, x1, y1, x2, y2, headLength = 8) {
        drawArrow(ctx, x1, y1, x2, y2, headLength);
        drawArrow(ctx, x2, y2, x1, y1, headLength);
    }

    // Main drawing
    ctx.strokeStyle = '#000000';
    ctx.fillStyle = '#000000';
    ctx.lineWidth = 1.5;

    // --- Draw the conductor slab ---
    const p_back_top_left = { x: 200, y: 140 };
    const p_back_top_right = { x: 600, y: 140 };
    const p_front_top_left = { x: 150, y: 180 };
    const p_front_top_right = { x: 550, y: 180 };
    const p_front_bottom_left = { x: 150, y: 330 };
    const p_front_bottom_right = { x: 550, y: 330 };

    ctx.beginPath();
    // Top surface
    ctx.moveTo(p_back_top_left.x, p_back_top_left.y);
    ctx.lineTo(p_back_top_right.x, p_back_top_right.y);
    ctx.lineTo(p_front_top_right.x, p_front_top_right.y);
    ctx.lineTo(p_front_top_left.x, p_front_top_left.y);
    ctx.closePath();
    
    // Front surface
    ctx.moveTo(p_front_top_left.x, p_front_top_left.y);
    ctx.lineTo(p_front_top_right.x, p_front_top_right.y);
    ctx.lineTo(p_front_bottom_right.x, p_front_bottom_right.y);
    ctx.lineTo(p_front_bottom_left.x, p_front_bottom_left.y);

    // Left wavy edge (to show it's a section)
    ctx.moveTo(p_front_top_left.x, p_front_top_left.y);
    ctx.bezierCurveTo(135, 210, 165, 250, p_front_bottom_left.x, p_front_bottom_left.y);

    ctx.stroke();

    // --- Draw Magnetic Field B ---
    ctx.save();
    ctx.lineWidth = 1;
    // Labeled arrow for B
    drawArrow(ctx, 400, 120, 480, 40);
    // Other field lines
    drawArrow(ctx, 220, 250, 300, 170);
    drawArrow(ctx, 350, 300, 430, 220);
    drawArrow(ctx, 500, 350, 580, 270);
    ctx.restore();

    // --- Draw Current I ---
    drawArrow(ctx, 250, 255, 450, 255);

    // --- Draw Dimensions ---
    // Dimension b (width)
    drawDoubleArrow(ctx, 180, 180, 180, 330);
    // Dimension d (thickness)
    const d_line_p1 = {x: 195, y: 144};
    const d_line_p2 = {x: 165, y: 172};
    ctx.beginPath();
    ctx.moveTo(d_line_p1.x - 15, d_line_p1.y - 10);
    ctx.lineTo(d_line_p1.x + 5, d_line_p1.y + 3);
    ctx.moveTo(d_line_p2.x - 15, d_line_p2.y - 10);
    ctx.lineTo(d_line_p2.x + 5, d_line_p2.y + 3);
    ctx.stroke();
    drawDoubleArrow(ctx, d_line_p1.x - 7, d_line_p1.y - 4, d_line_p2.x - 7, d_line_p2.y - 4);

    // --- Add Labels ---
    ctx.font = 'italic 24px Times New Roman';
    // B label
    ctx.fillText('B', 490, 85);
    // I label
    ctx.fillText('I', 465, 260);
    // d label
    ctx.fillText('d', 140, 150);
    // b label
    ctx.fillText('b', 190, 260);
    // a and a' labels
    ctx.fillText('a', 400, 135);
    ctx.fillText("a'", 400, 355);

    // --- Add Caption ---
    ctx.font = '24px "KaiTi", "SimSun", serif';
    ctx.textAlign = 'center';
    ctx.fillText('习题 8-36 图', canvas.width / 2, 440);

</script>
</body>
</html>